<template>
	<view>
		<view class="cell-item" :class="{'border-top':borderTop ,'border-bottom':borderBottom}" @click="tap">
			<view class="title-box">
				<view class="title">{{title}}</view>
				<view class="import-sign" v-if="must">*</view>
			</view>
			<view class="value-box" :class="{'tag-value-box':cellType =='closetag'}">
				<view class="value" v-if="cellType == 'text'">
					{{value}}
				</view>
				<view class="value" v-if="cellType == 'input'">
					<view class="input-value" v-if="disabled == true">
						{{value != '' ? value : placeholderText}}
					</view>
					<input v-if="disabled == false" class="input-value" @input="inputChange" :value="value" :placeholder="placeholderText" type="text" :disabled="disabled" />
				</view>
				<view class="value" v-if="cellType == 'checkbox'">
					<checkbox-group @change="checkboxChange">
						<label class="checkbox-label" :key="index" v-for="(item,index) in checkboxList">
							<checkbox checked :value="item.id" color="#416ade" style="transform:scale(0.7)" />{{item.name}}
						</label>
					</checkbox-group>
				</view>
				<view class="value" v-if="cellType == 'money'">
					<view class="input-value" v-if="disabled == true">
						{{inputValue != '' ? inputValue : placeholderText}}
					</view>
					<input type="number" v-if="disabled == false" @input="inputChange" :value="value" class="input-value"  :placeholder="placeholderText"  />
					<view class="company">{{company}}</view>
				</view>
				<scroll-view scroll-x class="value scroll-x-box" v-if="cellType =='closetag'">
					<view class="tag-box">
					<view class="tag-item" :key="item.id" v-for="(item,index) in tagList">
						<view class="tag-value">
							{{item.userName}}
						</view>
						<view class="close-icon" @click.stop="close(index)">
							<image class="icon" src="/static/image/close_blue_icon.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				</scroll-view>
				<view class="more-icon" v-if="more">
					<image class="icon" mode="aspectFit" src="/static/image/more_right_icon.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: "标题"
			},
			cellType: { // （text普通单元格;input输入单元格;money金额输入框;checkbox多项选中单元格;tag单元格内容为标签,closetag单元格内容为可关闭标签）
				type: String,
				default: 'text'
			},
			name:{
				type:String,
				default:''
			},
			company:{
				type:String,
				default:'元'
			},
			placeholderText: {
				type: String,
				default: ''
			},
			checkboxList: {
				type: Array,
				default: []
			},
			more: {
				type: Boolean,
				default: true,
			},
			must: {
				type: Boolean,
				default: false,
			},
			currentIndex:{
				type:Number,
				default:0
			},
			tagList:{
				type:Array,
				default:[]
			},
			value: {
				type: String,
				default: ''
			},
			borderTop: {
				type: Boolean,
				default: false,
			},
			borderBottom: {
				type: Boolean,
				default: false,
			},
			disabled:{
				type:Boolean,
				default:false,
			}
		},
		data() {
			return {
				inputValue:'',
			}
		},
		methods: {
			inputChange:function(e){
				this.$emit('inputValue',{name:this.name,value:e.target.value});
			},
			checkboxChange:function(e){
				console.log(e.detail.value);
				let data = {};
				data.redeploy = e.detail.value.filter(res=>{
					return res == '1';
				});
				if(data.redeploy.length > 0){
					data.redeploy = 1;
				}else{
					data.redeploy = 2;
				}
				data.disassemble = e.detail.value.filter(res=>{
					return res == '2';
				});
				if(data.disassemble.length > 0){
					data.disassemble = 1;
				}else{
					data.disassemble = 2;
				}
				this.$emit('checkboxChange',data);
			},
			tap:function(){
				this.$emit('click');
			},
			close:function(data){
				this.$emit('tagclose',data);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.border-top {
		border-top: 1px solid #ededed;
	}

	.border-bottom {
		border-bottom: 1px solid #ededed;
	}

	.cell-item {
		position: relative;
		overflow: hidden;
		background-color: white;
		height: 100rpx;
		width: calc(100% - 40rpx);
		box-sizing: border-box;
		padding: 0 20rpx;
		margin: 0 auto;
		font-size: 28rpx;

		.icon-box {
			width: 50rpx;
			height: 50rpx;
			margin-top: 25rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}
		.title-box{
			width: 300rpx;
			display: flex;
		}
		.title {
			white-space: nowrap;
			line-height: 100rpx;
			margin-left: 10rpx;
		}

		.import-sign {
			line-height: 100rpx;
			color: red;
		}
		.value-box {
			right: 10rpx;
			top:0;
			display: flex;
			position: absolute;
			overflow: hidden;
			.scroll-x-box{
				white-space: nowrap;
				width:calc(100% - 40rpx);
				overflow: hidden;
			}
			.value {
				line-height: 100rpx;
				display: flex;
				.input-value {
					height: 100rpx;
					text-align: right;
				}
				.checkbox-label{
					margin-left: 20rpx;
				}
				.company{
					margin-top:15rpx;
					font-size: 26rpx;
					font-weight: bold;
					line-height:70rpx;
					margin-left: 20rpx;
					height: 70rpx;
					background-color: #d9d9d9;
					padding:0 20rpx;
				}
				
			}

			.more-icon {
				margin-top: 30rpx;
				width: 40rpx;
				height: 40rpx;
				.icon {
					width: 100%;
					height: 100%;
				}
			}
		}
		.tag-value-box{
			width: calc(100% - 300rpx);
			.tag-box{
				display: flex;
			}
			.tag-item{
				color:#c8c8c8;
				border:1px solid #afafaf;
				font-size:28rpx;
				padding: 0 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				margin-top:15rpx;
				border-radius: 10rpx;
				position: relative;
				margin-right:20rpx;
			}
			.close-icon{
				width:30rpx;
				height:30rpx;
				position: absolute;
				right:-15rpx;
				top: -20rpx;
				.icon{
					width: 100%;
					height: 100%;
				}
			}
			.more-icon{
				// float: right;
			}
		}
	}
</style>
